<template>
    <Bar :config="config" />
</template>

<script setup>
import _ from 'lodash';
import Bar from '../components/Bar.vue';

const defaultBase = {
    type: 'bar',
    label: {
        show: true,
        position: 'inside',
        color: '#fff',
        formatter: '{c}元',
    },
};

const defaultSeriesItem = {
    stack: 'Total',
    ...defaultBase,
    emphasis: {
        focus: 'series',
    },
};

const config = {
    title: {
        text: '运输走势(最近15天)',
    },
    color: [
        ['#51C1F1', '#067AFF', [1, 0, 0, 1]],
        ['#84F8AA', '#29D0F1', [1, 0, 0, 1]],
        ['#FDD167', '#FD8F50', [1, 0, 0, 1]],
    ],

    legend: {
        orient: 'vertical',
        right: 0,
        padding: [50, 0, 0, 0],
        itemGap: 15,
        //left: 'right',
        itemStyle: {
            borderDashOffset: 30,
        },
    },
    // grid: {
    //     left: '3%',
    //     right: '4%',
    //     bottom: '3%',
    //     containLabel: true,
    // },

    xAxis: [
        {
            type: 'value',
        },
    ],
    yAxis: [
        {
            type: 'category',
            axisTick: {
                show: false,
            },
            data: ['宁夏账簿', '天京账簿'],
        },
    ],

    series: [
        {
            name: '支出',
            ...defaultBase,
            data: [200, 170, 240, 244, 200, 220, 210],
        },
        {
            name: '余额',
            ...defaultSeriesItem,
            data: [320, 302, 341, 374, 390, 450, 420],
        },
        {
            name: '入金',
            ...defaultSeriesItem,
            data: [-120, -132, -101, -134, -190, -230, -210],
        },
    ],
};
</script>

<style scoped></style>
